<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <title>颜色对应关系</title>
  <style>
    body{
      margin: 0;
      overflow: hidden;
      user-select: none;
      padding: 30vw 15vw;
    }
    #box {
      width: 70vw;
      height: 70vw;
      transform-origin: 50% 50% 0;
    }
    .ring {
      pointer-events: none;
      position: relative;
      margin: auto;
      padding: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      list-style: none;
      overflow: hidden;
    }
    .slice {
      overflow: hidden;
      position: absolute;
      top: 0; 
      right: 0;
      width: 50%;
      height: 50%;
      transform-origin: 0% 100%; 
    }
    .slice-1 {
      transform: rotate(-15deg) skewY(-60deg);
      background: rgb(255, 0, 0);
    }
    .slice-2 {
      transform: rotate(15deg) skewY(-60deg);
      background: rgb(255, 128, 0);
    }
    .slice-3 {
      transform: rotate(45deg) skewY(-60deg);
      background: rgb(255, 255, 0);
    }
    .slice-4 {
      transform: rotate(75deg) skewY(-60deg);
      background: rgb(128, 255, 0);
    }
    .slice-5 {
      transform: rotate(105deg) skewY(-60deg);
      background: rgb(0, 255, 0);
    }
    .slice-6 {
      transform: rotate(135deg) skewY(-60deg);
      background: rgb(0, 255, 128);
    }
    .slice-7 {
      transform: rotate(165deg) skewY(-60deg);
      background: rgb(0, 255, 255);
    }
    .slice-8 {
      transform: rotate(195deg) skewY(-60deg);
      background: rgb(0, 128, 255);
    }
    .slice-9 {
      transform: rotate(225deg) skewY(-60deg);
      background: rgb(0, 0, 255);
    }
    .slice-10 {
      transform: rotate(255deg) skewY(-60deg);
      background: rgb(128, 0, 255);
    }
    .slice-11 {
      transform: rotate(285deg) skewY(-60deg);
      background: rgb(255, 0, 255);
    }
    .slice-12 {
      transform: rotate(315deg) skewY(-60deg);
      background: rgb(255, 0, 128);
    }
    .text-wrap{
      position: absolute;
      z-index: 1;
    }
    .text{
      width: 60px;
      text-align: center;
    }
    .text-1{
      position: absolute;
      top: -60px;
      left: calc(35vw - 30px);
    }
    .text-2{
      position: absolute;
      top: -30px;
      left: calc(60vw - 30px);
    }
    .text-3{
      position: absolute;
      top: 40px;
      left: calc(75vw - 30px);
    }
    .text-4{
      position: absolute;
      top: 220px;
      left: calc(75vw - 30px);
    }
    .text-5{
      position: absolute;
      top: 330px;
      left: calc(35vw - 30px);
    }
    .text-6{
      position: absolute;
      top: 220px;
      left: calc(-5vw - 30px);
    }
    .text-7{
      position: absolute;
      top: 40px;
      left: calc(-5vw - 30px);
    }
    .text-8{
      position: absolute;
      top: -30px;
      left: calc(10vw - 30px);
    }
    .triangle-up{
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 12px solid black;
      position: absolute;
      top: 0;
      left: calc(35vw - 6px);
    }
    .line{
      width: 2px;
      height: 35vw;
      background-color: black;
      position: absolute;
      top: 0;
      left: calc(35vw - 1px);
    }
    .line-arrow{
      position: absolute;
      width: 70vw;
      height: 70vw;
      pointer-events: none;
    }
    .line-arrow-1{
      transform: rotate(0);
    }
    .line-arrow-2{
      transform: rotate(60deg);
    }
    .line-arrow-3{
      transform: rotate(120deg);
    }
    .line-arrow-4{
      transform: rotate(180deg);
    }
    .line-arrow-5{
      transform: rotate(-120deg);
    }
    .line-arrow-6{
      transform: rotate(-60deg);
    }
    .white-circle{
      width: 30vw;
      height: 30vw;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      top: 20vw;
      left: 20vw;
    }
  </style>
</head>
<body>
  <div class="text-wrap">
    <div class="text text-1">原色</div>
    <div class="text text-2">同类色</div>
    <div class="text text-3">邻近色</div>
    <div class="text text-4">对比色</div>
    <div class="text text-5">互补色</div>
    <div class="text text-6">对比色</div>
    <div class="text text-7">邻近色</div>
    <div class="text text-8">同类色</div>
    <div class="white-circle"></div>
    <div class="line-arrow line-arrow-1">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
    <div class="line-arrow line-arrow-2">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
    <div class="line-arrow line-arrow-3">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
    <div class="line-arrow line-arrow-4">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
    <div class="line-arrow line-arrow-5">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
    <div class="line-arrow line-arrow-6">
      <div class="triangle-up"></div>
      <div class="line"></div>
    </div>
  </div>
  <div id="box">
    <div class="ring">
      <div class="slice-1 slice"></div>
      <div class="slice-2 slice"></div>
      <div class="slice-3 slice"></div>
      <div class="slice-4 slice"></div>
      <div class="slice-5 slice"></div>
      <div class="slice-6 slice"></div>
      <div class="slice-7 slice"></div>
      <div class="slice-8 slice"></div>
      <div class="slice-9 slice"></div>
      <div class="slice-10 slice"></div>
      <div class="slice-11 slice"></div>
      <div class="slice-12 slice"></div>
    <div>
  </div>
  <script>
    let isMove = false
    // web
    $('#box').mousedown(function (event) {
      const element = event.target
      const rect = element.getBoundingClientRect()
      element.dataset.centerX = rect.left + rect.width / 2
      element.dataset.centerY = rect.top + rect.height / 2
      element.dataset.angle = getDragAngle(event)
      isMove = true
    })
    $('#box').mousemove(function (event) {
      if (isMove) {
        const angle = getDragAngle(event)
        event.currentTarget.style.transform = 'rotate(' + angle + 'rad)'
      }
    })
    $('#box').mouseup(function (event) {
      isMove = false
      event.target.dataset.angle = getDragAngle(event)
    })
    function getDragAngle(event) {
      const element = event.currentTarget
      const startAngle = parseFloat(element.dataset.angle) || 0
      const center = {
        x: parseFloat(element.dataset.centerX) || 0,
        y: parseFloat(element.dataset.centerY) || 0,
      }
      const angle = Math.atan2(center.y - event.clientY, center.x - event.clientX)
      return angle - startAngle
    }
    // mobile
    $('#box').on('touchstart', function (event) {
      const element = event.target
      const rect = element.getBoundingClientRect()
      element.dataset.centerX = rect.left + rect.width / 2
      element.dataset.centerY = rect.top + rect.height / 2
      element.dataset.angle = getDragAngle2(event)
      isMove = true
    })
    $('#box').on('touchmove', function (event) {
      if (isMove) {
        const angle = getDragAngle2(event)
        event.currentTarget.style.transform = 'rotate(' + angle + 'rad)'
      }
    })
    $('#box').on('touchend', function (event) {
      isMove = false
      event.target.dataset.angle = getDragAngle2(event)
    })
    function getDragAngle2(event) {
      const element = event.currentTarget
      const startAngle = parseFloat(element.dataset.angle) || 0
      const center = {
        x: parseFloat(element.dataset.centerX) || 0,
        y: parseFloat(element.dataset.centerY) || 0,
      }
      const touchs = event.touches && event.touches.length > 0 ? event.touches : event.changedTouches
      const angle = Math.atan2(center.y - touchs[0].clientY, center.x - touchs[0].clientX)
      return angle - startAngle
    }
  </script>
</body>
</html>